<template>
  <div class="my">
    <div class="my_head">
      <div class="my_head_img">
        <img :src="avatar" />
      </div>
      <div class="my_head_massage">
        <p class="name">{{ userName }}</p>
        <div class="mark">{{ email }}</div>
      </div>
    </div>
    <div class="my_list">
      <ul>
        <Site></Site>
        <OrderForm></OrderForm>
        <!-- <li><van-icon name="star-o" /> 我的收藏</li> -->
        <Set></Set>
        <!-- <li @click="showPopup"><van-icon name="setting-o" /> 设置</li> -->
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import Set from "@/components/Set.vue";
import Site from "../components/Site.vue";
import OrderForm from "../components/OrderForm.vue";

export default {
  components: {
    Set,
    Site,
    OrderForm,
  },
  name: "myView",
  data() {
    return {
      show: false,
    };
  },
  methods: {},
  computed: {
    ...mapState(["userName", "avatar"]),
    // ...mapGetters(["order/message"]),
    userName() {
      return this.$store.state.user.userName;
    },
    email() {
      return this.$store.state.user.email;
    },
    avatar() {
      return this.$store.state.user.avatar;
    },
  },

  mounted() {
    // console.log(this.email, this.userName, this.avatar);
    // this.showPopup();
  },
};
</script>

<style lang='scss' >
@import "@/static/common/base.scss";
.my {
  // padding: $p;
  .my_head {
    height: 30vw;
    width: 100%;
    background: url("@/assets/top_bg.jpg") no-repeat center;
    background-size: 100%;
    display: flex;
    align-items: center;
    .my_head_img {
      width: 21.3333vw;
      height: 21.3333vw;
      margin-left: 10vw;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .my_head_massage {
      margin-left: 3vw;
      color: #fff;
      .name {
        margin-bottom: 2vw;
      }
      .mark {
        font-size: 3.2vw;
      }
    }
  }
  .my_list {
    padding: $p;
    ul {
      li {
        border-bottom: 1px solid #ddd;
        height: 15vw;
        line-height: 15vw;
      }
    }
  }
}
</style>